<template>
  <div class="app-container pagination">
    <el-card>
      <div class="header">
        <div>
          <el-date-picker
            v-model="search['date']"
            class="margin-right-20"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="()=>pagination['load']()"/>
          <el-select v-model="search['status']" placeholder="订单状态" class="select" clearable @change="()=>pagination['load']()">
            <el-option :value="1" label="待支付"/>
            <el-option :value="2" label="已支付"/>
            <el-option :value="3" label="已取消"/>
            <el-option :value="4" label="待分配"/>
            <el-option :value="5" label="已分配"/>
            <el-option :value="6" label="司机拒接"/>
            <el-option :value="7" label="司机已接"/>
            <el-option :value="8" label="已完成"/>
            <el-option :value="9" label="已退款"/>
            <el-option :value="10" label="待退款"/>
            <el-option :value="11" label="部分退款"/>
          </el-select>
          <el-select v-model="search['type']" placeholder="订单类型" class="select" clearable @change="()=>pagination['load']()">
            <el-option :value="1" label="机场接送"/>
            <el-option :value="2" label="巴士路线"/>
            <el-option :value="3" label="专车接送"/>
            <el-option :value="4" label="包车路线"/>
            <el-option :value="5" label="车辆租凭"/>
          </el-select>
          <el-input v-model="search['search']" placeholder="请输入订单号" class="search-input"/>
          <el-button type="primary" icon="el-icon-search" @click="()=>pagination['load']()">搜索</el-button>
        </div>
        <div>
          <el-button :loading="downloadLoading" :disabled="downloadLoading" type="danger" icon="el-icon-printer" @click="handleDownload">批量导出</el-button>
        </div>
      </div>
      <ws-pagination v-model="pagination">
        <el-table-column prop="id" label="ID" width="90" header-align="center" align="center"/>
        <el-table-column prop="orderSn" label="订单号" min-width="170" header-align="center" align="center"/>
        <el-table-column prop="contactName" label="用户名" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row['contactName'] }}</div>
            <span class="remarks">{{ scope.row['mobile'] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="支付用户" min-width="120" header-align="center" align="center"/>
        <el-table-column prop="addressFrom" label="上车点" min-width="240" header-align="center" align="center"/>
        <el-table-column prop="addressTo" label="目的地" min-width="240" header-align="center" align="center"/>
        <el-table-column prop="createTime" label="下单时间" width="180" header-align="center" align="center"/>
        <el-table-column prop="reserveTime" label="出发时间" width="180" header-align="center" align="center"/>
        <el-table-column prop="typeName" label="订单类型" width="140" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row['type']===3?'专车接送':scope.row['type']===1?'机场接送':scope.row['type']===4?'包车路线':scope.row['type']===5?'车辆租凭':'巴士路线' }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="120" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tag v-if="scope.row['status']===2||scope.row['status']===3" type="info">{{ scope.row['statusText'] }}</el-tag>
            <el-tag v-else-if="scope.row['status']===1||scope.row['status']===10" type="warning">{{ scope.row['statusText'] }}</el-tag>
            <div v-else-if="scope.row['status']===6" @click="doReassign(scope.row)">
              <el-tag type="danger">{{ scope.row['statusText'] }}</el-tag>
            </div>
            <el-tag v-else-if="scope.row['status']===4||scope.row['status']===8">{{ scope.row['statusText'] }}</el-tag>
            <el-tag v-else type="success">{{ scope.row['statusText'] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <!--详情-->
            <router-link :to="`./details?id=${scope['row']['id']}`">
              <el-button size="small" type="primary" icon="el-icon-search" circle/>
            </router-link>
            <!--删除-->
            <el-button size="small" type="danger" icon="el-icon-delete" circle @click="deleteRow(scope['row'])"/>
          </template>
        </el-table-column>
      </ws-pagination>
    </el-card>
  </div>
</template>

<script>
  import Config from '../../config';
  export default {
    name: 'OrderList',
    components: {},
    data() {
      return {
        // 查询条件
        search: {
          // 订单号
          search: '',
          // 时间
          date: [],
          // 时间起点
          timeFrom: '',
          // 时间终点
          timeTo: '',
          // 状态
          status: '',
          // 类型
          type: ''
        },
        pagination: {},

        // 下载loading
        downloadLoading: false
      }
    },
    watch: {},
    created() {
      this.search['status'] = this.$router.currentRoute.query['status'] || '';
      this.search['type'] = this.$router.currentRoute.query['type'] || '';
      // 初始化分页器
      this.initPagination();
    },
    methods: {
      // 初始化分页器
      initPagination() {
        // 创建分页器
        this.pagination = new this.$pagination(async (...args) => {
          // 加载分页列表
          this.search.timeFrom = null;
          this.search.timeTo = null;
          this.search.date && this.search.date.length !== 0 && (this.search.timeFrom = this.search.date[0] + ' 00:00:00', this.search.timeTo = this.search.date[1] + ' 23:59:59')
          const result = await this.$service.applicationGetOrderList({
            ...args[0],
            search: this.search.search,
            timeFrom: this.search.timeFrom,
            timeTo: this.search.timeTo,
            status: this.search.status,
            type: this.search.type
          });
          if (result.code !== 0) {
            return this.$message.error(result.msg || '系统错误');
          }
          return result;
        });
        // 加载分页数据
        this.pagination.load();
      },
      // 删除指定行
      deleteRow({id}) {
        this.$confirm('此操作删除该訂單, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: async (confirm) => {
            if (confirm === 'confirm') {
              // 创建一级分类
              const result = await this.$service.applicationDeleteOrder({id: id});
              if (result.code === 0) {
                this.$message.success(`删除成功~`);
                // 加载分页数据
                this.pagination.load();
              } else {
                this.$message.error(result.msg);
              }
            }
          }
        });
      },
      // 重新指派
      doReassign(row){
        this.$confirm(`确定要重新分配这个订单吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: async (confirm) => {
            if (confirm === 'confirm') {
              // 创建一级分类
              const result = await this.$service.applicationReassignAOrder({
                id: row.id
              });
              if (result.code === 0) {
                this.$router.push(`./details?id=${row.id}`);
              } else {
                this.$message.error(result.msg);
              }
            }
          }
        });
      },
      // 导出
      handleDownload() {
        this.downloadLoading = true;
        const API_PATH = `${Config['API_TYPE'] === 'prod' ? Config['API_PATH'] : Config['API_PATH_DEV']}`;
        window.open(API_PATH + '/admin/order/export?token=' + this.$store.getters.token + '&page=' + this.pagination['data']['page'] +
          '&pageSize=' + this.pagination['data']['pageSize'] + '&search=' + this.search['search'] + '&type=' + this.search['type'] +
          '&status=' + this.search['status'] + '&timeFrom=' + this.search['timeFrom'] + '&timeTo=' + this.search['timeTo'] +
          '&mallId=' + this.$store.getters.sysUser.mallId);
        this.downloadLoading = false
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../styles/index.scss';
  .pagination {
    .header {
      @include flex-row(center, space-between);
      div{
        @include flex-row(center, flex-start);
        .search-input {
          width: 240px;
          margin-right: 5px;
        }
        .el-select{
          width: 160px;
          margin-right: 20px;
        }
      }
    }
  }
  .avatar{
    height: 72px;
    width: 72px;
  }
</style>
